<template>
	<view>
		<view class="presentation">
			<text class="subtitle">tabs标签页 </text>
			<text class="describe">tab标签页，可自定义颜色，字体大小等。</text>
		</view>
		<view class="tab_list">
			<tabs :current="current1" :values="lists" :styleType="'text'" @clickItem="clickItem1"></tabs>
			<view class="content">
				<view v-show="current1 === 0">
					选项卡1的内容
				</view>
				<view v-show="current1 === 1">
					选项卡2的内容
				</view>
				<view v-show="current1 === 2">
					选项卡3的内容
				</view>
				<view v-show="current1 === 3">
					选项卡4的内容
				</view>
			</view>
		</view>
		<view class="tab_list">
			<tabs :current="current2" :values="lists" :styleType="'button'" @clickItem="clickItem2"></tabs>
			<view class="content">
				<view v-show="current2 === 0">
					选项卡1的内容
				</view>
				<view v-show="current2 === 1">
					选项卡2的内容
				</view>
				<view v-show="current2 === 2">
					选项卡3的内容
				</view>
				<view v-show="current2 === 3">
					选项卡4的内容
				</view>
			</view>
		</view>
		<view class="tab_list">
			<tabs :current="current3" :values="lists" :styleType="'text'" :size="18" :activeColor="'rgb(7, 193, 96)'" @clickItem="clickItem3"></tabs>
			<view class="content">
				<view v-show="current3 === 0">
					选项卡1的内容
				</view>
				<view v-show="current3 === 1">
					选项卡2的内容
				</view>
				<view v-show="current3 === 2">
					选项卡3的内容
				</view>
				<view v-show="current3 === 3">
					选项卡4的内容
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import tabs from '../../components/ker-tabs/ker-tabs.vue'
	export default {
		components: {
			tabs
		},
		data() {
			return {
				lists: ['选项卡1', '选项卡2', '选项卡3', '选项卡4'],
				current1:0,
				current2:0,
				current3:0,
			}
		},
		methods: {
			clickItem1(item){
				console.log(item)
				this.current1 = item.currentIndex
			},
			clickItem2(item){
				console.log(item)
				this.current2 = item.currentIndex
			},
			clickItem3(item){
				console.log(item)
				this.current3 = item.currentIndex
			}
		},
		mounted() {}
	}
</script>
<style lang='scss' scoped>
	.presentation {
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20px 40px;

		.subtitle {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}

		.describe {
			font-size: 14px;
			color: #999;
		}
	}
	.tab_list{
		padding: 20px;
		border-bottom: 10px solid #f1f1f1;
		.content{
			padding: 20px 0;
		}
	}
</style>
